<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// const filterForm = reactive({
//     name: '',
// })
// function searchAction() {}
// function resetcAction() {
//     filterForm.name = ''
// }

const dataList = ref([])
const loading = ref(false)
function getData() {
    dataList.value = []
    for (let i = 0; i < 6; i++) {
        dataList.value.push({ id: i })
    }
}
getData()

const currentPage = ref(1)
const pageSize = 10
const total = ref(100)
function handleCurrentChange(e) {
    console.log(e)
}

// 新建/编辑
function newAction() {
    router.push('/video/cascade/new')
}
function editAction(item) {
    router.push('/video/cascade/new?id=' + item.id)
}

// 禁用/启用
function setStatus(item, status) {
    console.log(item, status)
}

// 删除
import { showConfirm } from '@/assets/js/utils'
import { showMsg } from '@/assets/js/utils'
function deleteAction() {
    showConfirm({
        content: '您确定要删除该通道吗？',
        onConfirm: () => {
            showMsg('删除成功')
        },
    })
}
</script>
<template>
    <div class="white-box d-flex-1">
        <el-button type="primary" @click="newAction">新增</el-button>
        <el-row class="mt-20" :gutter="20" v-loading="loading">
            <el-col :span="12" v-for="(item, index) in dataList" :key="index">
                <div class="iot-card">
                    <div class="iot-card-content">
                        <div class="img">
                            <img
                                src="@/assets/images/device-cascade.png"
                                alt=""
                            />
                        </div>
                        <div class="details">
                            <h4 class="title">推动到choicewell1.0平台</h4>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <h5 class="fs-14 color-default">
                                        通道数量：20
                                    </h5>
                                    <div class="state-content">
                                        <span class="dot success mr-5"></span>
                                        sip:34020000001000000001@127.0.0.1:8083
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="state success" v-if="index % 2 == 1">
                            <div class="state-content">
                                <span class="dot success mr-5"></span>
                                正常
                            </div>
                        </div>
                        <div class="state danger" v-else>
                            <div class="state-content">
                                <span class="dot danger mr-5"></span>
                                禁用
                            </div>
                        </div>
                    </div>
                    <div class="iot-card-oper">
                        <div class="card-button">
                            <el-button
                                link
                                type="primary"
                                @click="editAction(item)"
                            >
                                <el-icon class="mr-5"><EditPen /></el-icon>
                                编辑
                            </el-button>
                        </div>
                        <div class="card-button" @click="gotoChannel(item)">
                            <el-button link type="primary">
                                <el-icon class="mr-5"><Operation /></el-icon>
                                选择通道
                            </el-button>
                        </div>
                        <div class="card-button" @click="gotoChannel(item)">
                            <el-button link type="primary">
                                <el-icon class="mr-5"><Share /></el-icon>
                                推送
                            </el-button>
                        </div>
                        <div
                            class="card-button"
                            @click="setStatus(item, 0)"
                            v-if="index % 2 == 1"
                        >
                            <el-button link type="danger">
                                <el-icon class="mr-5"><CircleClose /></el-icon>
                                禁用
                            </el-button>
                        </div>
                        <div
                            class="card-button"
                            @click="setStatus(item, 1)"
                            v-else
                        >
                            <el-button link type="success">
                                <el-icon class="mr-5"><CircleClose /></el-icon>
                                启用
                            </el-button>
                        </div>
                        <div
                            class="card-button delete"
                            @click="deleteAction(item)"
                        >
                            <el-button link type="danger">
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="fl-bw mt-20">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.iot-card-content {
    .img {
        padding: 0;
        border: none;
        margin-right: 40px;
    }
}
</style>
